<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vis Network | Other | Clustering Clusters</title>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <style type="text/css">
      #mynetwork {
        width: 1000px;
        height: 800px;
        border: 1px solid lightgray;
      }
    </style>
  </head>
  <body onload="draw()">
    <p>
      Clusters can contain other clusters, but clusters of a single node is only
      possible by adding
    </p>
    <pre>allowSingleNodeCluster: true</pre>
    <p>
      to clusterNodeProperties<br />
      In this example repeatedly clicking on the node with open the Clusters.
    </p>
    <div id="mynetwork"></div>
    <div id="info"></div>
    <script type="text/javascript">
      var network;

      var node_color = ["orange", "green", "red", "yellow", "cyan"];
      var node_shape = ["star", "database", "diamond", "square", "triangle"];
      var nodes = new vis.DataSet([
        { id: "x", label: "Node X" },
        { id: "y", label: "Node Y" },
      ]);
      var network_options = {};
      var edges = new vis.DataSet([{ from: "x", to: "y" }]);

      var cluster_id = 1;

      function draw() {
        network = new vis.Network(
          document.getElementById("mynetwork"),
          {
            nodes: nodes,
            edges: edges,
          },
          network_options,
        );
        network.on("click", function (params) {
          if (params.nodes.length == 1) {
            if (network.isCluster(params.nodes[0]) == true) {
              network.openCluster(params.nodes[0]);
            }
          }
        });
        cluster();
        cluster();
        cluster();
      }

      function cluster() {
        var clusterOptions = {
          joinCondition: function (childOptions) {
            console.log(childOptions);
            return true;
          },
          clusterNodeProperties: {
            id: cluster_id,
            label: "Cluster " + cluster_id,
            color: node_color[cluster_id - 1],
            shape: node_shape[cluster_id - 1],
            allowSingleNodeCluster: true,
          },
        };
        cluster_id++;
        network.cluster(clusterOptions);
      }
    </script>
  </body>
</html>
